/**
 * Created by liaoweiping on 2016/12/26.
 * 更改资料
 */
import React from 'react';

import Headers from '../../components/qoute/Headers';
import TipsCommon from '../../components/qoute/TipsCommon';
import Global from '../../actions/Global';
var filemgt_server_url = Global.host;

var TipBox=React.createClass({
    render: function() {
        return (
        	<div>
				<div className='modalBg' style={{display:this.props.isShow}}>
				</div>
				<div className='changeInfo-tip' style={{display:this.props.isShow}}>
					后台审核通过后所修改的审核资料才能生效,在此之前您原有的资料信息及账户状态仍然有效
				</div>
			</div>
		);
    }
});


var ChangeInfo = React.createClass({
	getInitialState: function() {
		return {
		  data:null,
		  vendorTypeShow:'none',//供应商类型展示
		  vendorNameShow:'none',//组织名称展示
          organizationCode:'none', //组织机构展示
          cardNo:'none', //身份证号码展示
          firmNameShow:'none',//公司名称展示
          vendorType:'',//供应商类型文字
          tipShow:'none',//提交成功弹框展示
          agree:true,//是否同意协议
          commonShow:'none',//是否显示提示框
          commonContent:''//提示框内容
		};
    },
    //请求接口后初始化供应商类型展示
    vendorState:function(){
    	if(this.state.data&&this.state.data.customerKind=='E'){
			this.setState({
				firmNameShow:'block',
				organizationCode:'block',
				vendorType:'贸易商'
			});
		}else if(this.state.data&&this.state.data.customerKind=='F'){
			this.setState({
				vendorNameShow:'block',
				organizationCode:'block',
				vendorType:'农业组织'
			});
		}else if(this.state.data&&this.state.data.customerKind=='G'){
			this.setState({
				organizationCode:'block',
				vendorType:'个体户'
			});
		}else if(this.state.data&&this.state.data.customerKind=='H'){
			this.setState({
				cardNo:'block',
				vendorType:'个人'
			});
		}
    },
    //供应商类型英文值
    vendor:function(){
    	var message;
    	if(this.state.vendorType=='贸易商'){
    	    message='E';
    	}else if(this.state.vendorType=='农业组织'){
    	    message='F';
    	}else if(this.state.vendorType=='个体户'){
    	    message='G';
    	}else if(this.state.vendorType=='个人'){
    	    message='H';
    	}
    	return message;
    },
    //更换供应商类型函数
    changeType:function(){
    	if(this.state.vendorTypeShow=='none'){
    		this.setState({vendorTypeShow:'block'});
    	}else{
    		this.setState({vendorTypeShow:'none'});
    	}
    },
     //选择供应商类型
    changeFirst:function(){
    	this.setState({
    		vendorNameShow:'none',
	    	organizationCode:'block',
	    	cardNo:'none',
	    	firmNameShow:'block',
	    	vendorTypeShow:'none',
	    	vendorType:'贸易商'
    	});
    },
     //选择农业组织
    changeSecond:function(){
    	this.setState({
    		vendorNameShow:'block',
	    	organizationCode:'block',
	    	cardNo:'none',
	    	firmNameShow:'none',
	    	vendorTypeShow:'none',
	    	vendorType:'农业组织'
    	});
    },
     //选择个体户
    changeThird:function(){
    	this.setState({
    		vendorNameShow:'none',
	    	organizationCode:'block',
	    	cardNo:'none',
	    	firmNameShow:'none',
	    	vendorTypeShow:'none',
	    	vendorType:'个体户'
    	});
    },
     //选择个人
    changeForth:function(){
    	this.setState({
    		vendorNameShow:'none',
	    	organizationCode:'none',
	    	cardNo:'block',
	    	firmNameShow:'none',
	    	vendorTypeShow:'none',
	    	vendorType:'个人'
    	});
    },
    //点击同意协议
    agreement:function(){
    	if(this.state.agree){
    		this.setState({
    			agree:false,
    		});
    	}else{
    		this.setState({
    			agree:true,
    		});
    	}
    },
    //提交更改资料页面
    handleClick:function(){
    	if(!this.state.agree){
    		this.setState({commonShow: 'block',commonContent:'请同意《百果园采购协议》'});
		    setTimeout(function(){
				this.setState({ commonShow:'none',commonContent:''});
			}.bind(this),500);
			return false;
    	}
    	 //ajax请求修改用户注册信息接口
		var param = {
			vendorId:this.props.params.id,
		    customerKind:this.vendor(),
			vendorName:(this.state.vendorType=='贸易商')?this.refs.company.value:(this.state.vendorType=='农业组织')?this.refs.team.value:'',
			contacts: this.refs.name.value,
			organizationCode: this.refs.organizationCode.value,
			cardNo:this.refs.cardNo.value
		};
		$.ajax({
			type: 'post',
			url: filemgt_server_url+'/account/updateUser',
			data: JSON.stringify(param),
			dataType: 'json',
			contentType:'application/json;charset=utf-8',
			success: function(data){
				if(data.errorCode==0){
			    	this.setState({tipShow:'block'});
				    setTimeout(function(){
						this.setState({tipShow:'none'});
						window.history.back();//返回账户管理页面
					}.bind(this),500);
			    }else{
			    	this.setState({commonShow: 'block',commonContent:data.errorMsg});
				    setTimeout(function(){
						this.setState({ commonShow:'none',commonContent:''});
					}.bind(this),500);
			    }
			}.bind(this),
			error:function(){
			    this.setState({commonShow: 'block',commonContent:'网络连接不上，请稍后再试'});
			    setTimeout(function(){
					this.setState({ commonShow:'none',commonContent:''});
				}.bind(this),500);
			}.bind(this)
		});
    },
	componentDidMount: function() {
        //ajax请求注册信息接口
		var param = {
			vendorId:this.props.params.id
		};
		$.ajax({
			type: 'post',
			url: filemgt_server_url+'/account/queryUser',
			data: JSON.stringify(param),
			dataType: 'json',
			contentType:'application/json;charset=utf-8',
			success: function(data){
				if(data.errorCode==0){
			    	if(data.data==null){
				 		return false;
			    	}else{
			    		this.setState({data:data.data});
				    	this.vendorState();
			    	}
			    }else{
			    	this.setState({commonShow: 'block',commonContent:data.errorMsg});
				    setTimeout(function(){
						this.setState({ commonShow:'none',commonContent:''});
					}.bind(this),500);
			    }
			}.bind(this),
			error:function(){
			    this.setState({commonShow: 'block',commonContent:'网络连接不上，请稍后再试'});
			    setTimeout(function(){
					this.setState({ commonShow:'none',commonContent:''});
				}.bind(this),500);
			}.bind(this)
		});
	},
 	render: function () {
	    return (
	      <div className='full'>
	        <Headers title='更改资料'/>
	        <ul className='changeInfo'>
	          <li className='changeInfo-li'>联系人<input type='text' placeholder={this.state.data?this.state.data.contacts:''} ref='name' /></li>
	          <li className='changeInfo-li'>手机号码<input type='text' className='changeInfo-phone' placeholder={this.state.data?this.state.data.phoneNumber:''} disabled='true'/></li>
	        </ul>
	        <p className='changeInfo-zhanwei'></p>
	        <ul className='changeInfo'>
		        <li className='changeInfo-li changeInfo-down' onClick={this.changeType}>供应商类型<input type='text' disabled='true' value={this.state.vendorType}/><span></span></li>
		        <li className='changeInfo-type' style={{display:this.state.vendorTypeShow}}>
		        	<a onClick={this.changeFirst}>贸易商</a>
		        	<a onClick={this.changeSecond}>农业组织</a>
		        	<a onClick={this.changeThird}>个体户</a>
		        	<a onClick={this.changeForth}>个人</a>
		        </li>
		        <li className='changeInfo-li' style={{display:this.state.firmNameShow}}>公司名称<input type='text' placeholder={this.state.data?this.state.data.vendorName:''} ref='company' /></li>
		        <li className='changeInfo-li' style={{display:this.state.vendorNameShow}}>组织名称<input type='text' placeholder={this.state.data?this.state.data.vendorName:''} ref='team' /></li>
		        <li className='changeInfo-li' style={{display:this.state.organizationCode}}>组织机构代码<input type='text' placeholder={this.state.data?this.state.data.organizationCode:''} ref='organizationCode' /></li>
		        <li className='changeInfo-li' style={{display:this.state.cardNo}}>身份证号码<input type='text' placeholder={this.state.data?this.state.data.cardNo:''} ref='cardNo' /></li>
	        </ul>
	        <div className='qouteDetail-img'>
	       		<h3>个体户营业执照</h3>
	       		<img src=''/>
	        </div>
	        <div className='qouteDetail-img'>
	       		<h3>税务登记证</h3>
	       		<img src=''/>
	        </div>
	        <div className='changeInfo-agreement'>
	        	<span className={this.state.agree?'changeInfo-agree':''} onClick={this.agreement}></span>同意<a>&laquo;百果园采购协议&raquo;</a>
	        </div>
	        <div className='sumbitBtn' style={{display:this.state.qouteShow}}>
	           <a onClick={this.handleClick}>提交</a>
	        </div>
	        <TipBox isShow={this.state.tipShow}/>
	        <TipsCommon isShow={this.state.commonShow} content={this.state.commonContent}/>
	      </div>
	    )
  	}
});
export default ChangeInfo;
